<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body style="background-color: darkcyan">
<div id="app">
    <component1>
        <!--
        因为编译作用域，这里的在#app的作用域，所以isShow是app实例的data属性值
        规则就是：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
        -->
        <h3 v-show="isShow">hello</h3>
    </component1>
    <component2>
        <!--
        作用域插槽，简单理解就是了父级能用子组件数据来控制展示内容，数据源是子组件，父组件只是选择哪个展示
        使用方式就是：
        在子组件的slot用绑定的方式 v-bind:属性名=data值
        然后在使用组件的时候，在template用v-slot:name1（具名插槽名字）="slotProps"，内容就可以直接使用slotProps.属性（这个属性就是slot用 v-bind:属性名=data值），来获取到子组件的数据了
        -->
        <template v-slot:name1="slotProps" >
           <h2>{{slotProps.message}}</h2>
            <h2>{{slotProps.message1}}</h2>
        </template>
    </component2>
</div>

<template id="component1">
    <div style="background-color: #b65757">
        <h2 v-show="isShow">组件1</h2>
        <slot>默认值</slot>
    </div>
</template>

<template id="component2">
    <div style="background-color: #7c9595">
        <slot>默认值1</slot>
        <slot name="name1"
              v-bind:message="message"
              v-bind:message1="message1"
        >
            默认值2
        </slot>
    </div>
</template>


</body>
<script src="../css/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data:{
            isShow: true
        },
        components: {
            'component1': {
                template: "#component1",
                data() {
                    return {
                        isShow: false
                    };
                }
            },
            'component2': {
                template: "#component2",
                    data() {
                    return {
                        message: "我是子组件的内容",
                        message1: "message1"
                    };
                }
            }
        }
    })

</script>
</html>